import { useState } from "react";
import {
  Table,
  Input,
  Select,
  Button,
  Space,
  Pagination,
  Row,
  Col,
} from "antd";
import type { ColumnsType } from "antd/es/table";
import "./role.scss";

interface DataType {
  key: number;
  serialNumber: number;
  roleName: string;
  userCount: number;
  sortOrder: number;
  status: string;
  remark?: string;
}

export default function Role() {
  const [searchParams, setSearchParams] = useState<{
    postName?: string;
    status?: string;
  }>({});

  // 模拟角色数据
  const mockRoleData: DataType[] = [
    {
      key: 1,
      serialNumber: 1,
      roleName: "行政助理",
      userCount: 5,
      sortOrder: 1,
      status: "启用",
      remark: "",
    },
    {
      key: 2,
      serialNumber: 2,
      roleName: "人力资源专员",
      userCount: 5,
      sortOrder: 2,
      status: "停用",
      remark: "",
    },
    {
      key: 3,
      serialNumber: 3,
      roleName: "财务分析师",
      userCount: 5,
      sortOrder: 3,
      status: "启用",
      remark: "",
    },
    {
      key: 4,
      serialNumber: 4,
      roleName: "销售代表",
      userCount: 5,
      sortOrder: 4,
      status: "启用",
      remark: "",
    },
    {
      key: 5,
      serialNumber: 5,
      roleName: "市场营销经理",
      userCount: 5,
      sortOrder: 5,
      status: "启用",
      remark: "",
    },
    {
      key: 6,
      serialNumber: 6,
      roleName: "研发工程师",
      userCount: 5,
      sortOrder: 6,
      status: "启用",
      remark: "",
    },
    {
      key: 7,
      serialNumber: 7,
      roleName: "技术支持专员",
      userCount: 5,
      sortOrder: 7,
      status: "启用",
      remark: "",
    },
    {
      key: 8,
      serialNumber: 8,
      roleName: "运营经理",
      userCount: 5,
      sortOrder: 8,
      status: "启用",
      remark: "",
    },
    {
      key: 9,
      serialNumber: 9,
      roleName: "采购经理",
      userCount: 5,
      sortOrder: 9,
      status: "启用",
      remark: "",
    },
    {
      key: 10,
      serialNumber: 10,
      roleName: "生产主管",
      userCount: 5,
      sortOrder: 10,
      status: "启用",
      remark: "",
    },
  ];

  const [data] = useState<DataType[]>(mockRoleData);
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  // 计算分页数据
  const paginatedData = data.slice(
    (currentPage - 1) * pageSize,
    currentPage * pageSize
  );

  const handleSearch = () => {
    // 搜索逻辑
    console.log("Search params:", searchParams);
  };

  const handleReset = () => {
    setSearchParams({});
  };

  const handleCreate = () => {
    // 新建逻辑
  };

  const handleDelete = () => {
    // 删除逻辑
  };

  const handleEnable = () => {
    // 启用逻辑
  };

  const handleDisable = () => {
    // 停用逻辑
  };

  const handleEdit = (key: number) => {
    // 编辑逻辑
    console.log("Edit role:", key);
  };

  const handleDeleteRole = (key: number) => {
    // 删除单个角色逻辑
    console.log("Delete role:", key);
  };

  const columns: ColumnsType<DataType> = [
    {
      title: "序号",
      dataIndex: "serialNumber",
      key: "serialNumber",
      width: 80,
      fixed: "left",
    },
    {
      title: "角色名称",
      dataIndex: "roleName",
      key: "roleName",
      width: 150,
      ellipsis: true,
    },
    {
      title: "用户人数",
      dataIndex: "userCount",
      key: "userCount",
      width: 100,
    },
    {
      title: "排序",
      dataIndex: "sortOrder",
      key: "sortOrder",
      width: 80,
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      width: 80,
      render: (status) => {
        let color = "";
        if (status === "启用") {
          color = "#52c41a";
        } else if (status === "停用") {
          color = "#d9d9d9";
        }
        return <span style={{ color }}>{status}</span>;
      },
    },
    {
      title: "备注",
      dataIndex: "remark",
      key: "remark",
      width: 150,
    },
    {
      title: "操作",
      key: "action",
      width: 120,
      fixed: "right",
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => handleEdit(record.key)}>编辑</a>
          <a onClick={() => handleDeleteRole(record.key)}>删除</a>
        </Space>
      ),
    },
  ];

  return (
    <div className="role-management">
      <div className="search-filter">
        <Row gutter={16} align="middle">
          <Col>
            <div className="ant-form-item">
              <span>岗位</span>
              <Input
                placeholder="请输入岗位名称/编号"
                style={{ width: 150, marginLeft: 8 }}
                value={searchParams.postName}
                onChange={(e) =>
                  setSearchParams({ ...searchParams, postName: e.target.value })
                }
              />
            </div>
          </Col>
          <Col>
            <div className="ant-form-item">
              <span>状态</span>
              <Select
                placeholder="请选择"
                style={{ width: 150, marginLeft: 8 }}
                value={searchParams.status}
                onChange={(value) =>
                  setSearchParams({ ...searchParams, status: value })
                }
                allowClear>
                <Select.Option value="启用">启用</Select.Option>
                <Select.Option value="停用">停用</Select.Option>
              </Select>
            </div>
          </Col>
          <Col>
            <Space>
              <Button onClick={handleReset}>重置</Button>
              <Button type="primary" onClick={handleSearch}>
                查询
              </Button>
            </Space>
          </Col>
        </Row>
      </div>

      <div className="action-buttons">
        <Button type="primary" onClick={handleCreate}>
          新增
        </Button>
        <Button onClick={handleDelete}>删除</Button>
        <Button onClick={handleEnable}>启用</Button>
        <Button onClick={handleDisable}>停用</Button>
      </div>
      <div className="role-table">
        <Table
          columns={columns}
          dataSource={paginatedData}
          pagination={false}
          rowKey="key"
          size="middle"
          scroll={{
            x: "max-content",
            y: 400, // 设置表格内容区域的高度，超出时显示垂直滚动条
          }}
          rowSelection={{
            onChange: (selectedRowKeys, selectedRows) => {
              console.log("Selected row keys:", selectedRowKeys);
              console.log("Selected rows:", selectedRows);
            },
          }}
        />
      </div>

      {/* 分页区域 */}
      <div className="pagination">
        <div className="total-count">总 {data.length} 条</div>
        <Pagination
          current={currentPage}
          pageSize={pageSize}
          total={data.length}
          onChange={(page, size) => {
            setCurrentPage(page);
            setPageSize(size);
          }}
          showSizeChanger
          showQuickJumper
          showTotal={(total) => `总 ${total} 条`}
          pageSizeOptions={["2", "5", "8", "10"]}
        />
      </div>
    </div>
  );
}
